<template>
  <div class="joke-view">
    <BaseBox>
      <template #title>
        <BaseTitle>开心一笑😁</BaseTitle>
      </template>
      <div class="content" @click="getJokePuls">
        <p class="text">{{ joke }}</p>
      </div>
    </BaseBox>
  </div>
</template>

<script>
// 导入 请求方法
import { getJoke } from "@/api/info";
export default {
  name: "JokeView",
  data() {
    return {
      joke: "",
      interId: null,
    };
  },
  created() {
    // 页面创建即发请求
    this.getJokePuls();
    // setInterval(() => {
    //   this.getJokePuls();
    // }, 2000);
  },
  mounted() {},
  updated() {},
  // 可以获取数据，获取不到子组件
  // destroyed() {
  //   console.log("已移除定时器!!");
  //   clearInterval(this.interId);
  // },
  // 可以获取数据和子组件
  beforeDestroy() {
    console.log("已移除定时器!!");
    clearInterval(this.interId);
  },
  methods: {
    async getJokePuls() {
      const res = await getJoke();
      this.joke = res.data;
    },
  },
};
</script>

<style lang="less" scoped>
.joke-view {
  .time {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .base-switch {
      margin-right: 5px;
    }
  }
  .text {
    font-size: 30px;
    color: #6a4d52;
    cursor: pointer;
  }
}
</style>
